// src/components/SidebarExample.js

import React from 'react';
import {
  BrowserRouter as Router,
  Route,
  Link,
} from 'react-router-dom';

/*
 * 路由数据集合
 *
 * Each logical "route" has two components, one for the sidebar and one for the main area.
 * 每个逻辑 "route" 有两个组件，一个用于 sidebar(侧边栏)，一个用于 main(主区域)。
 *
 * We want to render both of them in different places when the path matches the current URL.
 * 当路径与当前 URL 匹配时，我们希望将它们呈现在不同的位置。
 */
const routes = [
  { path: '/',
    exact: true,
    sidebar: () => <div>home!</div>,
    main: () => <h2>首页标题</h2>
  },
  { path: '/bubblegum',
    sidebar: () => <div>bubblegum!</div>,
    main: () => <h2>泡泡糖标题</h2>
  },
  { path: '/shoelaces',
    sidebar: () => <div>shoelaces!</div>,
    main: () => <h2>鞋带标题</h2>
  }
];

/** 侧边栏例子 */
const SidebarExample = () => {

  /* 定义样式 */
  let containerStyle = { display: 'flex' };
  let sidebarStyle = { padding: '10px', width: '40%', background: '#f0f0f0' };
  let navStyle = { listStyleType: 'none', padding: 0 };
  let mainStyle = { flex: 1, padding: '10px' };

  return (
    <div style={containerStyle}>
      {/* 侧边栏导航 */}
      <div style={sidebarStyle}>
        <ul style={navStyle}>
          <li><Link to="/">首页</Link></li>
          <li><Link to="/bubblegum">泡泡糖</Link></li>
          <li><Link to="/shoelaces">鞋带</Link></li>
        </ul>

        {routes.map((route, index) => (
          /*
           * You can render a <Route> in as many places as you want in your app. It will render along with any other <Route>s that also match the URL.
           * 您可以在应用程序中根据需要在尽可能多的地方呈现 <Route>。它将与任何其他 URL 也匹配的 <Route> 一起呈现。
           *
           * So, a sidebar or breadcrumbs or anything else that requires you to render multiple things in multiple places at the same URL is nothing more than multiple <Route>s.
           * 所以，侧边栏或面包屑或其他任何需要你在同一个 URL 的多个地方呈现的东西只不过是多个 <Route>。
           */
          <Route
            key={index}
            path={route.path}
            exact={route.exact}
            component={route.sidebar}
          />
        ))}
      </div>

      {/* 主要区域 */}
      <div style={mainStyle}>
        {routes.map((route, index) => (
          /*
           * Render more <Route>s with the same paths as above, but different components this time.
           * 使用与上述相同的路径渲染更多 <Route>，但这次不同的组件。
           */
          <Route
            key={index}
            path={route.path}
            exact={route.exact}
            component={route.main}
          />
        ))}
      </div>
    </div>
  );
};

export default SidebarExample;
